import React, { useState } from 'react';
import './index.css';

function AddPlayer() {
  const [name, setName] = useState('');
  const [position, setPosition] = useState('');
  const [number, setNumber] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!name || !position || !number) {
      setMessage('请填写所有字段');
      return;
    }
    if (!/^[1-9]\d*$/.test(number)) {
      setMessage('号码必须为正整数');
      return;
    }
    setMessage(`球员已录入：${name}（${position}，${number}号）`);
    setName('');
    setPosition('');
    setNumber('');
  };

  return (
    <div className="player-list-container">
      <h2>录入球员信息</h2>
      <form onSubmit={handleSubmit} className="login-form">
        <input
          type="text"
          placeholder="姓名"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <select
          value={position}
          onChange={(e) => setPosition(e.target.value)}
        >
          <option value="">选择位置</option>
          <option value="前锋">前锋</option>
          <option value="中场">中场</option>
          <option value="后卫">后卫</option>
          <option value="守门员">守门员</option>
        </select>
        <input
          type="number"
          placeholder="号码"
          value={number}
          min="1"
          step="1"
          onChange={(e) => setNumber(e.target.value.replace(/[^\d]/g, ''))}
        />
        <button type="submit">录入</button>
      </form>
      {message && <div className="error">{message}</div>}
    </div>
  );
}

export default AddPlayer; 